<script>
import { mapGetters } from 'vuex'
var QQMapWX = require('../../js-wx-sdk/qqmap-wx-jssdk.js');
export default {
  name: "index",
  data() {
    return {
      mapIndex: 'post',
      post_category: '',
      dayText: '',
      start_time: '',
      end_time: '',
      form: {
        category: '',
        amount: '',
        welfare: '',
        desc: '',
        address:'',
        name: '',
        week: [],
        post_category_id: '',
        post_category: '',
        start_time: '',
        end_time: '',
        day: '',
        longitude: '',
        latitude:'',
        id: undefined
      },
      markers: [],
      action: this.$baseUrl + '/api/upload/file',
      fileList: [],
      fileList2: [],
      sexList: [
        {
          text: '男'
        },
        {
          text: '女'
        },
      ],
      showSex: false,
      showDate: false,
      dateParams: {
        year: true,
        month: true,
        day: true,
      },
      defaultDate: [],
      title: '发布职位',
      type: '',
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      list: [
        {
          text: '不限',
          value: ''
        },
        {
          text: '3天以内',
          value: 3
        },
          // 5
        {
          text: '5天以内',
          value: 5
        },
          // 7
        {
          text: '7天以内',
          value: 7
        },
          // 10
        {
          text: '14天以内',
          value: 14
        },
      ],
      activeWeek: [],
      weekList:[
        {
          name: '周一',
          id: 1,
        },
        {
          name: '周二',
          id: 2,
        },
        {
          name: '周三',
          id: 3,
        },
        {
          name: '周四',
          id: 4,
        },
        {
          name: '周五',
          id: 5
        },
        {
          name: '周六',
          id: 6
        },
        {
          name: '周日',
          id: 0
        }
      ],
      showTime1: false,
      showTime2: false,
      params: {
        hour: true,
        minute: true
      },
      postCategoryList: []
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    weekName() {
      let weekText = this.form.week.map(i => {
        let find = this.weekList.find(item => item.id === i)
        return find ? find.name : ''
      }).join(',')
      return weekText + '' + this.form.start_time + '~' + this.form.end_time
    }
  },
  onLoad({ type, id }) {
    if (!this.userInfo.id) {
      uni.showToast({
        title: '请先登录',
        icon: 'none'
      })
      uni.navigateTo({
        url: '/pages/user/login'
      })
      return
    }
    this.$api.getPostCategoryList({
      pid: 0
    }).then(res => {
      this.postCategoryList = res
      console.log(this.postCategoryList)
    })
    this.form.id = id
    this.form.category = type
    this.type = type
    if (id) {
      this.title = '修改职位-' + type
      this.$api.getPostDetail({
        id: id
      }).then(res => {
        console.log(res)
        this.form = {
          ...res,
          week: (res.week || '').split(',').filter(i => i).map(i => Number(i))
        }
        if (this.type === '时段岗') {
          this.start_time = res.start_time
          this.end_time = res.end_time
        } else {
          this.form.start_time = res.start_date
          this.form.end_time = res.end_date
        }
        this.post_category = res.post_category
        let find = this.list.find(i => i.value == res.day)
        this.dayText = find ? find.text : ''
        this.activeWeek = (res.week || '').split(',').filter(i => i).map(i => Number(i))
      })
    } else {
      this.title = '发布职位-' + type
      let that = this
      uni.showLoading({
        title: '获取定位中',
        mask: true,
        duration: 0
      });
      uni.getLocation({
        type: 'wgs84',
        success: function(res) {
          console.log(res)
          uni.hideLoading();
          console.log(res)
          that.form.longitude = res.longitude
          that.form.latitude = res.latitude

          that.markers = [{
            id: 10,
            latitude: Number(res.latitude),
            longitude: Number(res.longitude),
            title: 'title',
            zIndex: '1',
            rotate: 0,
            width: 30,
            height: 30,
            anchor: {
              x: 0.5,
              y: 1
            },
            callout: {
              content: 'content',
              color: '#fff',
              fontSize: 10,
              borderRadius: 4,
              borderWidth: 1,
              borderColor: '#fb6620',
              bgColor: '#f7b733',
              padding: '5',
              display: 'ALWAYS'
            },
            iconPath: './location.png'
          }]
          that.getName({
            longitude: res.longitude,
            latitude: res.latitude
          })
        },
        fail: function(err) {
          console.log(err)
          uni.hideLoading();
          console.log(err)
        },
        complete(res) {
          console.log(res)
          uni.hideLoading();
        }
      });
    }
  },
  methods: {
    getName(e) {
      let that = this
      var qqmapsdk = new QQMapWX({
        key: 'AE3BZ-SVQKU-BHUVT-GNGMH-QVJKK-2PFRJ' // 必填
      });
      qqmapsdk.reverseGeocoder({
        //Object格式
        location: {
          latitude: e.latitude,
          longitude: e.longitude
        },
        success: function (res) {
          console.log(res.result)
          let {
            city,
            district,
            street_number,
          } = res.result.address_component
          that.form.address = `${city}${district}${street_number}`;
        }, fail: function (error) {
          console.error(error);
        },
        complete: function (res) {
          //console.log(res);
        }
      })
    },
    toSubmit() {
      if (!this.userInfo.id) {
        uni.showModal({
          title: '提示',
          content: '请先登录',
          showCancel: true,
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/user/login'
              })
            }
          }
        })
        return
      }
      uni.showLoading({
        title: '发布中',
        mask: true
      });
      let params = {
        ...this.form,
        user_id: this.userInfo.id,
        week: this.form.week.join(',')
      }
      if (this.type !== '时段岗') {
        params.start_date = this.form.start_time
        params.end_date = this.form.end_time
        delete params.start_time
        delete params.end_time
      }
      if (this.form.id) {
        this.$api.updatePost(params).then(res => {
          uni.showToast({
            title: '发布成功',
            icon: 'success'
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 1000)
        }).finally(() => {
          setTimeout(() => {
            uni.hideLoading()
          }, 1000)
        })
      } else {
        this.$api.createPost(params).then(res => {
          uni.showToast({
            title: '发布成功',
            icon: 'success'
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 1000)
        }).finally(() => {
          setTimeout(() => {
            uni.hideLoading()
          }, 1000)
        })
      }
    },
    toMap() {
      uni.chooseLocation({
        latitude: this.form.latitude,
        longitude: this.form.longitude,
        address: this.form.address,
        name: this.form.address,
        success: res => {
          if (res.errMsg === 'chooseLocation:ok') {
            console.log(res)
            if (!res.address) {
              uni.showToast({
                title: '请选择正常地址',
                icon: 'none'
              })
              return;
            }
            this.form.longitude = res.longitude;
            this.form.latitude = res.latitude;
            this.form.address = res.address;
            console.log('this.form.address',this.form.address)
          } else {
            uni.showToast({
              title: '获取位置失败',
              icon: 'none'
            })
          }
        },
        fail: err => {
          console.log(err);
        },
        complete: (err) => {
          console.log(err);
        }
      });
    },
    openDate() {
      if (this.type === '兼职岗') {
        this.show1 = true
      } else if (this.type === '短期岗') {
        this.show2 = true
      } else if (this.type === '全职岗') {
        this.show3 = true
      } else if (this.type === '时段岗') {
        this.show4 = true
      }
    },
    openPostCategory() {
      this.show5 = true
    },
    confirmPostCategory(e) {
      console.log(e)
      let item0 = e[0]
      let item = e[1]
      this.post_category = item0.label + '-' + item.label
      this.form.post_category = item.label
      this.form.post_category_id = item.value
    },
    changeDate1(e) {
      console.log(e)
      this.form.end_time = `${e.year}-${e.month}-${e.day}`
    },
    changeDate2(e) {
      console.log(e)
      this.form.start_time = e.startDate
      this.form.end_time = e.endDate
    },
    changeDate3(e) {
      console.log(e)
      this.dayText = this.list[e].text
      this.form.day = this.list[e].value
    },
    confirmStartTime(e) {
      console.log(e)
      this.start_time  = e.hour + ':' + e.minute
    },
    confirmEndTime(e) {
      console.log(e)
      this.end_time  = e.hour + ':' + e.minute
    },
    clickWeek(item) {
      // 多选
      if (this.activeWeek.includes(item.id)) {
        this.activeWeek = this.activeWeek.filter(i => i !== item.id)
      } else {
        this.activeWeek.push(item.id)
      }
    },
    confirmWeek() {
      this.show4 = false
      this.form.week = this.activeWeek
      this.form.start_time = this.start_time
      this.form.end_time = this.end_time
    },
    clearWeek() {
      this.activeWeek = []
      this.start_time = ''
      this.end_time = ''
    }
  }
}
</script>

<template>
  <div class="detail5">
    <u-navbar :title="title" :background="{ backgroundColor: 'transparent'}" title-color="#000" :border-bottom="false"></u-navbar>
    <div class="top"></div>
    <div class="card">
      <u-form :model="form" ref="uForm" label-width="100px" label-position="top">
        <u-form-item label="职位名称"><u-input v-model="form.name" disbaled/></u-form-item>
        <u-form-item label="时段" v-show="type === '时段岗'"><u-input placeholder="请选择时间" v-model="weekName" disbaled type="select" @click="openDate"/></u-form-item>
        <u-form-item label="急招" v-show="type === '全职岗'"><u-input placeholder="请选择日期" v-model="dayText" disbaled type="select" @click="openDate"/></u-form-item>
        <u-form-item label="日期" v-show="type === '兼职岗'"><u-input placeholder="请选择日期" v-model="form.end_time" disbaled type="select" @click="openDate"/></u-form-item>
        <u-form-item label="日期" v-show="type === '短期岗'"><u-input placeholder="请选择日期" :value="form.start_time + '~' + form.end_time" disbaled type="select" @click="openDate"/></u-form-item>
        <u-form-item label="职位分类">
          <u-input placeholder="请选择职位分类" v-model="post_category" disbaled type="select" @click="openPostCategory"/>
        </u-form-item>
        <u-form-item label="薪资"><u-input v-model="form.amount" disbaled/></u-form-item>
        <u-form-item label="福利待遇"><u-input type="textarea" :auto-height="true" v-model="form.welfare"/></u-form-item>
        <u-form-item label="入职须知"><u-input type="textarea" :auto-height="true" v-model="form.desc"/></u-form-item>
        <u-form-item label="工作地点">
          <div style="width: 100%;display: flex;align-items: center;justify-content: space-between">
            <u-input v-model="form.address" disbaled/>
            <u-icon name="map-fill" color="#05C8CE" size="48" @click="toMap"></u-icon>
          </div>
        </u-form-item>
      </u-form>
      <map show-location :key='mapIndex' :markers="markers"  class="map-view" :latitude="form.latitude" :longitude="form.longitude"  ></map>
    </div>
    <div class="footer">
      <div class="button" @click="toSubmit">确认</div>
    </div>
    <u-action-sheet :list="list" v-model="show3" @click="changeDate3"></u-action-sheet>
    <u-calendar max-date="2099" @change="changeDate1" v-model="show1" mode="date" active-color="#fff" active-bg-color="#05C8CE"  range-color="#fff" range-bg-color="#05C8CE"></u-calendar>
    <u-calendar @change="changeDate2" max-date="2050-12-31" v-model="show2" mode="range" active-color="#fff" active-bg-color="#05C8CE"  range-color="#fff" range-bg-color="#05C8CE"></u-calendar>
    <u-popup v-model="show4" mode="bottom" border-radius="32">
      <div class="post-popup popup">
        <div class="item-title">
          时段选择
          <image class="title-icon" src="/static/detail/title@2x.png"></image>
        </div>
        <div class="time-box">
          <div class="time-item" @click="showTime1 = true">
            {{ start_time || '开始时间' }}
          </div>
          <div style="margin: 0 24rpx">~</div>
          <div class="time-item" @click="showTime2 = true">
            {{ end_time || '结束时间'}}
          </div>
        </div>
        <div class="week-list">
          <div
              @click="clickWeek(item)"
              v-for="item in weekList" :class="['week-item', activeWeek.includes(item.id) ? 'active' : '']">{{ item.name }}
          </div>
        </div>
        <div class="submit-list">
          <div class="clear-btn" @click="clearWeek">清空</div>
          <div class="submit-btn" @click="confirmWeek">确认</div>
        </div>
      </div>
    </u-popup>
    <u-select
        value-name="id"
        label-name="name"
        v-model="show5" :list="postCategoryList" mode="mutil-column-auto" @confirm="confirmPostCategory"></u-select>
    <u-picker v-model="showTime1" mode="time" :params="params" confirm-color="#05C8CE" @confirm="confirmStartTime"></u-picker>
    <u-picker v-model="showTime2" mode="time" :params="params" confirm-color="#05C8CE" @confirm="confirmEndTime"></u-picker>
  </div>
</template>

<style scoped lang="scss">
.detail5 {
  height: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 40rpx 24rpx 140rpx 24rpx;
  padding-bottom: 180rpx;
  .popup {
    padding: 40rpx;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    .time-box {
      display: flex;
      align-items: center;
      margin-top: 30rpx;
      margin-bottom: 30rpx;
      .time-item {
        width: 140rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        border-radius: 4rpx;
        background: rgba(5,200,206,0.1);
        font-size: 24rpx;
      }
    }
    .week-list {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 40rpx;
      .week-item {
        width: 96rpx;
        height: 52rpx;
        line-height: 48rpx;
        text-align: center;
        border-radius: 26rpx;
        background: #999999;
        color: #ffffff;
        border: 1px solid #999999;
        margin: 24rpx 24rpx 0 0;
      }
      .week-item.active {
        background: #05C8CE;
        border: 1px solid #05C8CE;
        color: #ffffff !important;
      }
    }
    .submit-list {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .clear-btn {
        height: 80rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 36rpx;
        color: #666666;
        line-height: 76rpx;
        text-align: center;
        background: #ffffff;
        border-radius: 40rpx;
        border: 1px solid #f2f2f2;
        width: 260rpx
      }
      .submit-btn {
        height: 80rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 36rpx;
        color: #FFFFFF;
        line-height: 76rpx;
        text-align: center;
        background: #05C8CE;
        border-radius: 40rpx;
        margin-left: 20rpx;
        border: 1px solid #05C8CE;
        flex-grow: 1;
      }
    }
  }
  .map-view {
    width: 100%;
    height: 384rpx;
    margin: 32rpx 0;
  }
  .footer {
    background-color: #ffffff;
    border-bottom-left-radius: 16rpx;
    border-bottom-right-radius: 16rpx;
    display: flex;
    align-items: center;
    padding-bottom: 40rpx;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 2;
    left: 0;
    padding-top: 30rpx;
  }
  .button {
    flex: 1;
    margin: 0 30rpx;
    text-align: center;
    line-height: 80rpx;
    height: 80rpx;
    border-radius: 40rpx;
  }
  .card {
    position: relative;
    z-index: 2;
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx;
    overflow: auto;
    .card-header {
      height: 178rpx;
      display: flex;
      align-items: center;
      border: 1rpx solid #DADADA;
      .line {
        width: 8rpx;
        height: 54rpx;
        background-color: #05C8CE;
        border-radius: 3rpx 3rpx 3rpx 3rpx;
      }
      .title {
        height: 90rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 64rpx;
        color: #303030;
        line-height: 75rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
        flex-grow: 1;
      }
      // 工资
      .salary {
        height: 36rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
        color: #05C8CE;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-left: 30rpx;
        margin-right: 30rpx;
      }

    }
    .card-body {
      .item {
        margin: 50rpx;
        .item-title {
          height: 44rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 32rpx;
          color: #303030;
          line-height: 38rpx;
          text-align: left;
          font-style: normal;
          text-transform: none;
          position: relative;
          margin-bottom: 20rpx;
          .title-icon {
            width: 24rpx;
            height: 24rpx;
            position: absolute;
            left: -6rpx;
            bottom: 0rpx;
          }
        }
      }
      .content {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #3D3D3D;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-bottom: 30rpx;
      }
    }
  }
  .top {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 522rpx;
    background: linear-gradient( 180deg, #05C8CE 0%, rgba(223,254,255,0.5) 100%);
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
}
</style>
